<template>
    <div class="page" @click="onchat">
        <van-badge :content="5">
            <div class="container2">
                <div class="chatinfo">
                    <img src="https://ts3.cn.mm.bing.net/th?id=ORMS.d9f4ac49474c095af13129513ef1701b&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=0.9375&p=0"
                        alt="">
                    <div class="pipoinfos">
                        <p class="title">{{title}}</p>
                        <p class="taginfo">{{school}}</p>
                    </div>

                </div>
                <div class="chattime">{{timer}}</div>
            </div>
        </van-badge>

    </div>
</template>
<script>
export default {
    props: {
        item:{type:Object},
        title:{type:String,default:'客服'},
        school:{type:String,default:'北京大学'},
        timer:{type:String,default:()=>''}
    },
    data() {
        return {

        }
    },
    methods: {
        onchat() {
            this.$emit('onclick',this.item)
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    display: inline-block;
    width: 100%;
}

.van-badge__wrapper {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.container2 {
    padding: 10px 15px;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    border-radius: 5%;

    .chatinfo {
        display: flex;

        img {
            border-radius: 50%;
            height: 50px;
            width: 50px;
        }

        .pipoinfos {
            padding-left: 15px;

            .title {
                color: black;
                font-size: 18px;
                line-height: 30px;
            }

            .taginfo {
                color: rgb(240, 162, 149);
                font-size: 13px;
                font-weight: 300;
            }
        }

    }

}
</style>